<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>买号管理</span>
    </div>
    <div class="home-container">

      <v-searchForm
        :form-data="filter_info"
        :form-title="formTitle"
        @reset="reset"
        @search="search"
      />
      <v-tableBtns
        :show-create="true"
        :table-title="exportTitle"
        :table-data="exportData"
        :show-upload="true"
        :upload-url="uploadUrl"
        :on-export="handleExport"
        title="买号"
        @addNew="addNew"
      />

      <v-table
        :table-title="tableTitle"
        :table-data="tableData"
        @sortChange="sortChange"
        @edit="edit"
        @del="del"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>

  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'

  export default {
    name: 'Home',
    components: {UploadExcelComponent},
    data() {
      return {
        uploadUrl: process.env.BASE_API + 'action/BuympsRecord/saveFile',
        // f分页
        pageInfo: {
          pageNumber: 1,
          pageSize: 30,
          totalPage: 0,
          totalRow: 0
        },
        exportTitle: [
          {
            cn: '合同编号',
            en: '合同编号'
          },
          {
            cn: '合同总金额',
            en: '合同总额'
          },
          {
            cn: '开票公司(对方公司)',
            en: '开票公司'
          },
          {
            cn: '核销总金额',
            en: '核销金额'
          },
          {
            cn: '税点',
            en: '税点'
          },
          {
            cn: '税额',
            en: '税额'
          },
          {
            cn: '待摊销金额',
            en: '待摊销金额'
          },
          {
            cn: '形式',
            en: '形式'
          },
          {
            cn: '对应公众号',
            en: 'mpsname'
          },
          {
            cn: '月摊销金额',
            en: '本月成本'
          },
          {
            cn: '分摊开始时间',
            en: 'start_time'
          },
          {
            cn: '结束时间',
            en: 'end_time'
          },
          {
            cn: '累计摊销',
            en: '累计成本'
          },
          {
            cn: '剩余摊销金额',
            en: '剩余成本'
          }
        ],
        exportData: [],
        // 排序
        sidx: 'id',
        sortKey: null,

        formTitle: [
          {
            cn: '对方单位名称：',
            en: 'company_name'
          },
          {
            cn: '合同编号：',
            en: 'ct_number'
          },
          // {
          //   cn: '内容：',
          //   en: '内容'
          // },
          {
            cn: '合同金额：',
            en: 'money',
            type: 'range',
            dataName: {min: 'moneyMin', max: 'moneyMax'}
          },
          {
            cn: '公众号：',
            en: 'mpsname'
          },
          {
            cn: '创建时间：',
            en: 'created_at',
            type: 'time'
          }
        ],
        filter_info: {},
        tableTitle: [
          {
            cn: 'id',
            en: 'id',
            sortable: true
          },
          {
            cn: '对方单位名称',
            en: 'opposing_party_unit'
          },
          {
            cn: '合同编号',
            en: 'ct_number',
            sortable: true
          },
          {
            cn: '内容',
            en: 'procurement_contents',
            sortable: true
          },
          {
            cn: '合同金额',
            en: 'money'
          },
          {
            cn: '已付款金额',
            en: 'paymoney'
          },
          {
            cn: '已核销金额',
            en: 'mpmoney'
          },
          {
            cn: '包含公众号',
            en: 'mpsname'
          },
          {
            cn: '合同状态',
            en: 'contract_status',
            sortable: true
          },
          {
            cn: '创建时间',
            en: 'date_of_signing',
            sortable: true
          }
        ],
        tableData: [],

      }
    },
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ]),
      filter_infos() {
        const data = {}
        const origin = this.filter_info
        for (const key in origin) {
          if (!this.filter_info[key] && this.filter_info[key] !== 0) {
            this.$delete(this.filter_info, key)
            continue
          }
          if (key === 'created_at') {
            data.start_time = origin[key][0]
            data.End_time = origin[key][1]
          } else {
            data[key] = origin[key]
          }
        }
        if (!origin.created_at) {
          delete data.start_time
          delete data.End_time
        }
        return data
      }
    },
    activated() {
      this.getTableList()
    },
    methods: {
      getTableList(data) {
        const loading = this.$loading()
          loading.close()
        const datas = {
          ...this.filter_infos,
          page: this.pageInfo.pageNumber, rows: this.pageInfo.pageSize,
          sidx: this.sidx,
          sortKey: this.sortKey,
        }
        this.$get('action/BuympsRecord/dataGrid', datas)
          .then(res => {
            let list
            if (res.data.list && res.data.list.length) {
              list = res.data.list.map((item, index) => {
                return item
              })
              this.pageInfo.totalPage = res.data.totalPage
              this.pageInfo.totalRow = res.data.totalRow
            }

            this.tableData = list || []
              loading.close()
          })
          .catch(_=>{
            loading.close()
          })
      },
      // 搜索
      search() {
        this.pageInfo.pageNumber=1
        this.getTableList()
      },
      reset() {
        this.filter_info = {}
        this.getTableList()
      },

      del(val) {
        console.log(val)
        const data = {id: val.row.id}
        this.$post('action/BuympsRecord/del', data)
          .then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.getTableList()
          })
      },

      addNew() {
        this.$router.push({
          name: 'cost_manage.buyed_account.contract'
        })
      },
      edit(val) {
        console.log(val)
        this.$router.push({
          name: 'cost_manage.buyed_account.contract',
          query: {id: val.row.id}
        })
      },
      // 排序
      sortChange({column, prop, order}) {
        console.log(column, prop, order)
        this.sidx = prop || 'id'
        this.sortKey = order === 'ascending' ? 'asc' : null
        this.getTableList()
      },

      handleExport() {
        const data = this.filter_infos;
        this.$get('action/BuympsRecord/GetFile', data)
          .then(res => {
            this.exportData = res.data.map(item => {
              item.形式 = '买号';
              return item
            }) || []
          })
          .catch(err => {
            this.exportData = []
          })
      },

    }

  }
</script>

